<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">修改支付密码</block>
		</cu-custom>
		<form @submit="onSubmit">

			<view class="white-box">
				<view class="cu-form-group">
					<view class="title">手机号</view>
				</view>
				<view style="min-height:1.4rem;border-top: none" class="cu-form-group bg-gray">
					<input placeholder-class="input-holder" disabled="" placeholder="请输入手机号" v-model="formData.mobile"></input>
				</view>

				<view class="cu-form-group">
					<view class="title">验证码</view>
				</view>
				<view class="cu-form-group text-left" style="border: none;">
					<input placeholder="输入验证码" name="code" v-model="formData.code"></input>
					<view class="action">
						<smsView ref="smsView" :usage="'up-pwd'" :mobile="formData.mobile"></smsView>
					</view>
				</view>
				<!-- 
				<view class="cu-form-group">
					<view class="title">原密码</view>
				</view>
				<!-- <view style="min-height:1.4rem;border-top: none" class="cu-form-group">
					<input placeholder-class="input-holder" placeholder="请输入原密码" v-model="formData.password"></input>
				</view> -->
				<view class="cu-form-group">
					<view class="title">新密码</view>
				</view>
				<view style="min-height:1.4rem;border-top: none" class="cu-form-group">
					<input placeholder-class="input-holder" placeholder="请输入新密码" v-model="formData.new_password"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">确认新密码</view>
				</view>
				<view style="min-height:1.4rem;border-top: none;border-bottom: 1rpx solid #eee;" class="cu-form-group">
					<input placeholder-class="input-holder" placeholder="确认新密码" v-model="formData.re_password"></input>
				</view>

				<button form-type="submit" class="cu-btn bg-yellow round lg">确认修改</button>
			</view>

		</form>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import smsView from '@/components/default/smsView.vue'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin', 'member']),
		components: {
			smsView,
		},
		data() {
			return {
				formData: {
					mobile: '',
					code: '',
					// password: '',
					new_password: '',
					re_password: '',
					pay: 1,
				}
			}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member)=>{
					this.formData.mobile = member.mobile
				})
			}
		},
		methods: {
			onSubmit(e) {
				let formData = this.formData

				// if (!formData.password.trim()) {
				// 	this.$common.showError('原密码不能为空')
				// 	return
				// }
				if (!formData.new_password.trim()) {
					this.$common.showError('新密码不能为空')
					return
				}
				if (formData.new_password != formData.re_password) {
					this.$common.showError('新密码和确认密码不一致')
					return
				}

				console.log(formData)
				this.$http
					.post('reset_pw', formData)
					.then((response) => {
						console.log(response)
						if (response.data.code == 200) {
							//console.log('登陆成功')
							this.$common.showSuccess('修改成功', function() {
								uni.navigateBack({})
							})
						} else {
							this.$common.showError('修改失败:' + response.data.message)
						}
					})
					.catch((response) => {
						console.log(response)
					})
			}
		}
	}
</script>

<style>
	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 0rpx 36rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}

	.white-box .cu-form-group {
		padding: 0;
	}

	.cu-form-group .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 55rpx;
	}

	.cu-form-group .picker {
		color: #D1D1D1;
		font-size: 26rpx;
	}

	.cu-form-group picker {
		margin-right: 0;
		/* padding-right: 20rpx; */
		text-align: right;
	}

	.cu-form-group .area-picker {
		padding-right: 0;
		font-size: 26rpx;
	}

	.cu-form-group .input-holder {
		text-align: left;
		color: #D1D1D1;
		font-size: 26rpx;
	}

	.cu-form-group input {
		text-align: left;
	}

	.tips {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		font-size: 24rpx;
		font-weight: bold;
		color: #BEBEBE;
		line-height: 45rpx;
	}

	.tips text {
		color: #FF0000;
		margin-left: 10rpx;
	}

	button {
		width: 100%;
		margin: 88rpx 0rpx 50rpx;
	}
</style>
